import React ,{Component} from "react"; 
import CommonHead from "../../components/commonHead"
import axios from "axios";
import { Button, Toast } from 'antd-mobile';
function successToast() {
    Toast.success('恭喜您，注册成功！！！', 1);
  }

function showToast(msg) {
Toast.info(msg, 1);
}
export default class Register extends Component{
    register=()=>{
        var name= this.refs.name.value;
        var Email= this.refs.Email.value;
        var userpwd= this.refs.userpwd.value;
        var confirmpwd= this.refs.confirmpwd.value;
        var checkeds=this.refs.checkeds.checked;
        console.log(checkeds)
        const {dispatch,history}=this.props;
        var flag1=false;
        var flag2=false;
        var flag3=false;
        var flag4=false;
        var reg1=/^[a-zA-Z$_\u4e00-\u9fa5]{1}[a-zA-Z$_0-9\u4e00-\u9fa5]{5,9}$/g;
        if(reg1.test(name)){
            flag1=true;
        }else{
            flag1=false;
        }
        var reg2=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/g ;
        if(reg2.test(Email)){
            flag2=true;
        }else{
            flag2=false;

        }
        var reg3=/^[a-zA-Z$_0-9]{6,20}$/g;
        if(reg3.test(userpwd)){
            flag3=true;
        }else{
            flag3=false;
        }

        if(userpwd==confirmpwd){
            flag4=true;
        }else{
            flag4=false;
        }
        if(checkeds){
            if(flag1&flag2&flag3&flag4){
                axios.post("/register",{
                    username:name,
                    Email:Email,
                    pwd:userpwd
                })
                .then(res=>{
                    switch(res.data){
                      case 1:
                      successToast()
                      console.log("注册成功", "提示")
                    history.push("/login")
                      break;
                       case 2:
                      console.log("服务器故障", "提示")
                      showToast("服务器故障")
                      break;
                       case 3:
                      console.log("手机号已存在", "提示")
                      showToast("用户名已存在")
                      
                      break;
                    }
                })
            }else{
                showToast("您输入的用户名或邮箱或密码不合法")
                
            }
        }else{
            showToast("请先阅读服务条款并同意")
            
        }
       
        
    }





    render(){
        const {history} = this.props;
        return (
            <div className="register">
                <CommonHead title="注册" show={true} history={history}/>
                <div className="registerContent clearfix">
                    <input className="username" type="text" placeholder="用户名" ref="name"/>
                    <span className="usernameSpan">
                        <i className="iconfont icon-tixingtishi"></i>
                        不得小于3个字符
                    </span>
                    <input className=" Email" type="text" placeholder="邮箱" ref="Email"/>
                    <span className="usernameSpan">
                        <i className="iconfont icon-tixingtishi"></i>
                        不得小于3个字符
                    </span><input className=" pwd" type="password" placeholder="密码" ref="userpwd"/>
                    <span className="usernameSpan">
                        <i className="iconfont icon-tixingtishi"></i>
                        不得小于6个字符
                    </span><input className="confirmPwd" type="password" placeholder="密码确认" ref="confirmpwd"/>
                    <span className="usernameSpan">
                        <i className="iconfont icon-tixingtishi"></i>
                        不得小于6个字符
                    </span>
                    <input className="registerBtn" type="button" onClick={this.register} value="注册"/>
                    <div className="tiaokuan">
                        <input type="checkbox" className="checks" ref="checkeds" /> 我已阅读并同意《用户服务条款》
                    </div>
                </div>
                
            </div>
        )
    }

}